ブラウザなどからコピーしたリンクなどを含むテキストを scrapbox に貼り付ける
たとえば、このリンク先を Chrome で開いて、以下の選択箇所を copy するとじつは text/html 形式でも clipboard に保存されています。(mac だけかもしれないけど)
例: https://cloud.google.com/build/docs/release-notes#May_10_2022
https://nota.gyazo.com/9e84baea4f17bdf17fababc93fd70fb9
これを貼り付けるとこうなる
You can now use Cloud Build attestors to secure your image deployments. To learn how to set up gated deployments, see Securing image deployments to Cloud Run and Google Kubernetes Engine. To learn how to view build integrity records, see Viewing build provenance. This feature is generally available.
You can now use Cloud Build attestors to secure your image deployments. To learn how to set up gated deployments, see Securing image deployments to Cloud Run and Google Kubernetes Engine. To learn how to view build integrity records, see Viewing build provenance. This feature is generally available.
こんな感じに html 形式のリンクなどを scrapbox 書式にしたものも引用として追加
技術的 (and/or 僕の理解の) 制約でテキストをリンクありで差し替えるのでなく text/plain の前に入れてます
html 形式不要な場合は shift + ペーストで text だけ貼り付けられると思います (Chrome mac で確認)
利用する場合は以下の script を参考に
/help-jp/UserScript にも書かれていますが、上級者向けの危険な機能なので注意
予告なく内容を変更する可能性があります
code:script.js
import '/api/code/hiroshi-public/ブラウザなどからコピーしたリンクなどを含むテキストを_scrapbox_に貼り付ける/script.js'
TODO
リンクとタイトルが同じ場合は URL のままにする
html がある程度複雑だと改行などうまく表現できていないことがある
変更履歴
2022-05-05
A タグを含まないときは冗長なだけなので無視
2022-03-17
rtf が入っているときはブラウザが勝手に rtf から html を生成しているだけの場合が多いので html も無視
以下 script 本体
code:script.js
//console.log("hello")
document.getElementById("text-input").addEventListener("paste", async (clipboardEvent) => {
// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
//console.log(clipboardEvent.clipboardData.types);
//console.log(clipboardEvent.clipboardData.getData("text/html"));
// rtf が入ってるときはブラウザが勝手に rtf から html 生成してる感じで嬉しくないので何もしない
if (clipboardEvent.clipboardData.types.indexOf("text/rtf") >= 0) {
return;
}
let value = "";
// mac Chrome でコピーするとページの url が入ってることがわかったけど Chrome では逆にそれを取り出すことができない?
// console.log(clipboardEvent.clipboardData.types);
// const url = clipboardEvent.clipboardData.getData("org.chromium.source-url")
// if (!url) {
// value += url + "\n";
// }
const html = clipboardEvent.clipboardData.getData("text/html")
if (!html) {
return;
}
console.log(html);
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
// NOTE: 貼り付けられるテキストを差し替えたいけど、prepend される感じになるので html 部分は > で引用として入れる
value += "> ";
let lastP = false; // 最後の <p> では改行しないようにする
let ignore = true; // A タグがなければ冗長なだけなので value を paste しない
const processNode = (n) => {
//console.log(n);
//console.log(n.children.length);
if (n.tagName === 'A') {
value += "+ n.href + " " + n.innerText + "";
ignore = false;
} else if (n.tagName === 'CODE') {
value += "" + n.innerText + "";
} else {
if (n.children) {
if (lastP) {
value += "\n> ";
lastP = false;
}
if (n.children.length > 0) {
Array.from(n.childNodes).forEach((child) => {
processNode(child);
});
} else {
value += n.innerText;
}
if (n.tagName === 'P') {
lastP = true;
}
} else {
value += n.textContent.replaceAll(/\n/g,'');
}
}
};
Array.from(doc.body.childNodes).forEach((n) => {
processNode(n)
});
// FIXME: getElementsByTagName("*") だと div とそれに含まれる要素と二度実行されるのでテキストがダブってしまう
//Array.from(doc.body.getElementsByTagName("*")).forEach((e) => {
// console.log(e);
// console.log(e.children.length);
// if (e.tagName === 'A') {
// value += "+ e.href + " " + e.innerText + "";
// } else {
// value += e.innerText;
// }
//});
//console.log(value);
if (!ignore) {
clipboardEvent.target.value = value + "\n";
}
// clipboardEvent.preventDefault(); // ここで preventDefault() するとなにも paste されなくなったように見えて、 paste 後になにかタイプすると現れるという挙動になってしまう
});